<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>人工清票存积分</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <style>
    html {
      font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      height: 100%;
    }

    body {
      overflow-x: hidden;
      text-align: center;
    }
    p{
      color:black;
      margin: 0;
    }

    .title{
      margin: 0.4rem 0;
    }

    .dataDiv{
      width: 72%;
      margin: 0 auto;
      background-color: white;
      border-radius: 0.2rem;
      border: 1px solid rgba(0, 0, 0, 0.36);
      padding: 0.2rem 0 0.2rem;
    }

    .dataDiv p{
      margin: 0;
    }

    .dataDiv img{
      width:1.2rem;
      height: 1.2rem;
    }
    .userInfoTitle{
      width: 100%;
      padding: 0.3rem 0;
      background-color: white;
      overflow: hidden;
      border-bottom: 1px solid #AAAAAA;
    }
    .userInfoTitle> div{
      float: left;
    }
    .userInfoTitle p{
      text-align: left;
    }
    .userImg{
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 0.6rem;
      overflow: hidden;
      margin-right: 0.3rem;
      margin-left: 0.3rem;
    }
    .userImg img{
      width: 1.2rem;
    }

    .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.2);
    }
    .deviceDiv{
      width: 100%;
      height: 60%;
      position: absolute;
      bottom: 0;
      z-index: 9999;
      overflow-x: hidden;
      overflow-y: scroll;
      background-color: white;
      padding-bottom: 0.8rem;

    }
    .deviceDiv>p{
      width: 100%;
      font-size: 0.28rem;
      margin: 0.3rem 0;
    }
    .deviceList div{
      width: 1.9rem;
      height:1.2rem;
      line-height: 1.2rem;
      text-align: center;
      font-size: 0.22rem;
      margin-left: 0.86rem;
      margin-bottom: 0.3rem;
      float: left;
      border: 1px solid #AAAAAA;

    }
    .backBtn{
      width: 100%;
      background-color: #f7f7f7;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 0.6rem;
      line-height: 0.4rem;
    }

    .dataList{
      width: 100%;
      overflow: hidden;
    }
    .dataList>div{
      width: 3rem;
      margin-left: 0.13rem;
      float: left;
      margin-top: 0.3rem;
    }







  </style>
</head>

<body>
<div class="mui-content" id="app">
  <div class="userInfoTitle">
    <div class="userImg">
      <img :src="userInfo.header" alt="">
    </div>
    <div>
      <p>{{userInfo.userName}} </p>
      <p>ID:{{userInfo.userId}}</p>
      <p>当前积分：{{userInfo.point}}</p>
    </div>
  </div>
  <div class="title">
    <p>第二步：选择清票机器</p>
  </div>
  <div class="mui-row dataList" >
    <div v-for="(item,index) in originalData" class="mui-col-sm-6 mui-col-xs-6"  @click="openDeviceList(item)">
      <div class="dataDiv">
        <img :src="config.imgPath+item.icon" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>

  </div>
  <div v-show="isShow" class="mask" >
    <div style="width: 100%;height: 40%" @click="isShow=false">

    </div>
    <div class="deviceDiv">
      <p>选择机器</p>
      <div class="deviceList" v-for="(item,index) in deviceList">
        <div @click="toAddPage(item)" >{{item.name}}</div>
      </div>
      <button class="backBtn" @click="isShow=false">
        返回
      </button>
    </div>
  </div>



</div>
<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">


  var vm = new Vue({
    el: '#app',
    data: {
      isShow: false,
      currentShopObj: {},
      userInfo: '',
      originalData: '',
      deviceList:[],
    },
    created: function() {
      mui.init()
      mui.plusReady(function() {
        vm.receiveParams()
        console.log(454545)
      })
    },
    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview()
        this.currentShopObj = self.currentShopObj;
        this.userInfo = self.userInfo;
        this.localData()
      },
      openDeviceList:function(item){
        console.log(JSON.stringify(item))
        config.ajax({
          url: '/martificial/getModel',
          data: {
            "storeId":vm.currentShopObj.storeId,
            "id":item.modelId,
          },
          success: function(res) {
            console.log(JSON.stringify(res))
            if(res.result === 1) {
              vm.deviceList=res.data
            } else {
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })


        this.isShow=true
      },
      toAddPage:function(item){
        this.isShow=false;
        mui.openWindow({
          url: './peopleAddIntegral.html',
          id: 'peopleAddIntegral',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '人工清票存积分',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: this.currentShopObj,
            deviceInfo: item,
            userInfo: this.userInfo,
          }
        })
      },
      localData:function(){
        var vm=this;
        config.ajax({
          url: '/martificial/get',
          data: {
            "page":1,
            "pageSize":2000,
          },
          success: function(res) {
            console.log(JSON.stringify(res))
            if(res.result === 1) {
              vm.originalData=res.data.data
            } else {
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      }
    }
  })

</script>
</body>

</html>